<template>
  <div class="case-analvsis">
    <div class="filter-container">
      <el-select
        size="small"
        placeholder="预警等级"
        class="filter-item"
        v-model="level"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <!-- <el-select
        size="small"
        placeholder="案件来源"
        class="filter-item"
        v-model="level"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        placeholder="案件状态"
        class="filter-item"
        v-model="level"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        placeholder="风险类型"
        class="filter-item"
        v-model="level"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-select
        size="small"
        placeholder="处理结果"
        class="filter-item"
        v-model="level"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-select
        size="small"
        placeholder="案件ID"
        class="filter-item"
        v-model="level"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-select
        size="small"
        placeholder="案件等级"
        class="filter-item"
        v-model="level"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select> -->

      <el-date-picker
        v-model="dateRange"
        type="daterange"
        size="small"
        align="left"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        class="filter-item"
      ></el-date-picker>

      <el-input
        v-model="keyword"
        size="small"
        class="filter-item"
        placeholder="请输入关键词"
        style="width: 360px;"
      ></el-input>

      <el-button
        @click="handleQuery"
        type="primary"
        size="small"
        ref="btnQuery"
        class="filter-item"
        >查询</el-button
      >
      <el-button
        @click="handleClear"
        type="danger"
        size="small"
        class="filter-item"
        ref="btnRefresh"
        >清空</el-button
      >
    </div>
    <TitleContainer />
    <el-table :data="list" fit style="width:100%" border>
      <el-table-column label="ID" prop="id" align="left"></el-table-column>
      <el-table-column
        label="预警规则"
        prop="rule_name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="详细信息"
        prop="rule_desc"
        align="center"
      ></el-table-column>
      <el-table-column
        label="等级"
        prop="level"
        align="center"
      ></el-table-column>
      <el-table-column
        label="进件ID"
        prop="risk_id"
        align="center"
      ></el-table-column>
      <el-table-column
        label="触发时间"
        prop="create_at"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="140px">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="showIncoming(scope.row.rule_name)"
            class="click-btn"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="current_page"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      title="进件ID详情"
      :visible="incoming.visible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="cancelIncomingDialog"
    >
      <el-table :data="incoming.lists" fit border style="width:100%">
        <el-table-column
          label="预警规则"
          prop="rule_name"
          align="center"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="进件ID"
          prop="apply_risk_id"
          align="center"
          width="180px"
        ></el-table-column>
        <el-table-column
          label="触发时间"
          prop="create_at"
          align="center"
          width=""
        ></el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @current-change="handleIncomingPageChange"
          :current-page.sync="incoming.page"
          :page-size="incoming.limit"
          layout="total, prev, pager, next"
          :total="incoming.total"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TitleContainer from '@/components/title/TitleContainer'
export default {
  data() {
    return {
      keyword: '',
      options: [
        { label: '全部', value: 5 },
        { label: '严重', value: 3 },
        { label: '关注', value: 2 },
        { label: '一般', value: 1 }
      ],
      list: [
        {
          id: '1',
          rule_name: 'wa00001',
          rule_desc: '夜间总体进件量超预警值',
          risk_id: '7556,7555,7554,7543,7542,7484,',
          level: '一般',
          status: '1',
          create_at: '2019-11-25 14:27:27'
        },
        {
          id: '2',
          rule_name: 'wa00002',
          rule_desc: '夜间总体进件量超预警值',
          risk_id: '7556,7555,7554,7543,7542,7484,',
          level: '一般',
          status: '1',
          create_at: '2019-11-25 14:27:27'
        },
        {
          id: '3',
          rule_name: 'wa00003',
          rule_desc: '夜间总体进件量超预警值',
          risk_id: '7556,7555,7554,7543,7542,7484,',
          level: '一般',
          status: '1',
          create_at: '2019-11-26 14:27:27'
        },
        {
          id: '4',
          rule_name: 'wa00004',
          rule_desc: '夜间总体进件量超预警值',
          risk_id: '7556,7555,7554,7543,7542,7484,',
          level: '一般',
          status: '1',
          create_at: '2019-11-26 14:27:27'
        }
      ],
      limit: 10,
      level: '',
      current_page: 1,
      dateRange: [],
      total: 0,
      incoming: {
        visible: false,
        ruleName: '',
        limit: 10,
        page: 1,
        loading: false,
        total: 0,
        lists: [
          {
            id: '69',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7556',
            level: '1',
            status: '1',
            create_at: '2019-11-25 14:27:27',
            update_at: '2019-11-25 14:27:27'
          },
          {
            id: '68',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7555',
            level: '1',
            status: '1',
            create_at: '2019-11-25 14:27:25',
            update_at: '2019-11-25 14:27:25'
          },
          {
            id: '67',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7554',
            level: '1',
            status: '1',
            create_at: '2019-11-25 14:27:24',
            update_at: '2019-11-25 14:27:24'
          },
          {
            id: '66',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7543',
            level: '1',
            status: '1',
            create_at: '2019-11-25 14:27:23',
            update_at: '2019-11-25 14:27:23'
          },
          {
            id: '65',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7542',
            level: '1',
            status: '1',
            create_at: '2019-11-25 14:27:20',
            update_at: '2019-11-25 14:27:20'
          },
          {
            id: '64',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7484',
            level: '1',
            status: '1',
            create_at: '2019-10-14 14:31:02',
            update_at: '2019-10-14 14:31:02'
          },
          {
            id: '63',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7483',
            level: '1',
            status: '1',
            create_at: '2019-10-14 14:27:01',
            update_at: '2019-10-14 14:27:01'
          },
          {
            id: '62',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7482',
            level: '1',
            status: '1',
            create_at: '2019-10-14 14:26:32',
            update_at: '2019-10-14 14:26:32'
          },
          {
            id: '61',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7475',
            level: '1',
            status: '1',
            create_at: '2019-10-12 11:11:31',
            update_at: '2019-10-12 11:11:31'
          },
          {
            id: '60',
            rule_name: 'wa00001',
            rule_desc: '夜间总体进件量超预警值',
            apply_risk_id: '7474',
            level: '1',
            status: '1',
            create_at: '2019-10-12 11:10:31',
            update_at: '2019-10-12 11:10:31'
          }
        ]
      },
      tableLoading: false
    }
  },
  methods: {
    handleClear() {
      this.dateRange = []
      this.keyword = ''
      this.level = ''
    },
    handleQuery() {
      this.current_page = 1
      this.fetchList()
    },
    handleCurrentChange(pageId) {
      this.current_page = pageId
      this.fetchList()
    },
    cancelIncomingDialog() {
      this.incoming = Object.assign(this.incoming, {
        visible: false,
        loading: false,
        ruleName: '',
        list: []
      })
    },
    handleIncomingPageChange(page) {
      this.incoming.page = page
      this.fetchIncoming()
    },
    showIncoming(rule) {
      this.incoming = Object.assign(this.incoming, {
        visible: true,
        ruleName: rule
      })
      this.fetchIncoming()
    },
    fetchIncoming() {
      this.incoming = Object.assign(this.incoming, { loading: true })
      this.$api.alarm
        .ruleInfo({
          data: {
            current_page: this.incoming.page,
            rule_name: this.incoming.ruleName
          }
        })
        .then(res => {
          this.incoming = Object.assign(this.incoming, {
            lists: res.data.data.list,
            total: +res.data.data.count,
            loading: false
          })
        })
        .catch(error => {
          this.$message.error(error)
          this.incoming.loading = false
        })
    },

    fetchList() {
      this.tableLoading = true
      this.$api.alarm
        .signal({
          data: {
            level: this.level,
            keyword: this.keyword,
            start: this.dateRange ? this.dateRange[0] : '',
            end: this.dateRange ? this.dateRange[1] : '',
            current_page: this.current_page
          }
        })
        .then(res => {
          this.tableLoading = false
          ;(this.list = res.data.data.list), (this.total = +res.data.data.count)
        })
        .catch(error => {
          this.tableLoading = false
        })
    }
  },
  mounted() {
    this.fetchList()
  },
  components: {
    TitleContainer
  }
}
</script>

<style lang="scss" scoped>
.component-container {
  padding: 0 20px;
  position: relative;
}
.case-analvsis {
  padding: 20px;
}
.table-container {
  margin-bottom: 20px;
}
</style>
